<template>
	<view class="page">
		<view class="top">
			<view class="detail-img">
				<image src="../../../static/ic_share.png" mode="" class="topimageright" bindtap="goBack"></image>
				<image src="../../../static/product001.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="xiangqing">
			<view class="jiage">
				￥6399
			</view>
			<view class="canshu">
				【XXXX40 Pro】XXXX40 Pro 5G手机
			</view>
			<view class="fx">
				<image src="../../../static/ic_bar_share.png" mode="" class="fximage"></image>
				分享
			</view>
			<view class="sc">
				<image src="../../../static/background.png" mode="" class="scimage"></image>
				收藏
			</view>
			<view class="jjtz">
			  <image src="../../../static/ic_price.png" mode="" class="jjtzimage"></image>
			  降价通知
			</view>
		</view>

		<view class="two">
			<view class="yixuan">
				已选
			</view>
			<view class="peizhi">
				深邃黑 8+128G 4G全网通 官网标配 x1
			</view>
			<image src="../../../static/ic_point.png" mode="" class="twoiamge"></image>
		</view>


		<view class="kuaidi">
			<view class="sz">
				送至
			</view>
			<view class="dz">
				<image src="../../../static/ic_send.png" mode="" class="dzimage"></image>
				请选择您的收货地址
			</view>
			<view class="fw">
				服务
			</view>
			<view class="yf">
				<image src="../../../static/ic_supplying.png" mode="" class="yfimage"></image>
				免运费(请以提交订单时为准)
			</view>
			<view class="sh">
				<image src="../../../static/ic_supplying.png" mode="" class="shimage"></image>
				店铺发货&售后
			</view>
			<view class="th">
				<image src="../../../static/ic_supplying.png" mode="" class="thimage"></image>
				7天无理由退货
			</view>
		</view>

		<view class="pingjia">
			<view class="yhpj">
				用户评价(2万+)
			</view>
			<view class="hpbfb">
				98%
			</view>
			<view class="hp">
				好评
				<image src="../../../static/ic_right_arrow.png" mode="" class="hpimage"></image>
			</view>
			<view class="dhimage">
				<image src="../../../static/ic_person.png" mode="" class="dhimage"></image>
			</view>
			<view class="dh">
				152****6666
			</view>
			<view class="spms">
				和描述相符合，很喜欢，做工精细，颜色好看，原装正品。
			</view>

			<view class="dhimagee">
				<image src="../../../static/ic_person.png" mode="" class="dhimage"></image>
			</view>
			<view class="dhh">
				152****8888
			</view>
			<view class="spmss">
				和描述相符合，很喜欢，做工精细，颜色好看，原装正品。
			</view>

			<view class="anniu">
				查看更多评价
			</view>
		</view>

		<view class="bottomimg">
			<image src="../../../static/product001.png" mode="widthFix"></image>
		</view>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>

</template>


<script>

	export default {
		data() {
			return {
				prod: {
					picList: []
				},
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			// 查看购物车数组有没有
			let cartArray = uni.getStorageSync("cart") || [];
			console.log("cartArray", cartArray);
			uni.setStorageSync('cart',cartArray)
			console.log("option.id", option.id); //打印出上个页面传递的参数。
			if (option.id) {
				this.prod = prodList.find(item => item.id == option.id)
			}
		},
		methods: {
			onClick(e) {
				console.log(e);
				// uni.showToast({
				// 	title: `点击${e.content.text}`,
				// 	icon: 'none'
				// })
				if(e.index === 0) {
					
				} else if(e.index === 1) {
					
				} else if(e.index === 2) {
					this.gotoCart()
				}
			},
			buttonClick(e) {
				console.log(e)
				if(e.index === 0) {
					this.addInCart()
				} else {
					this.buy()
				}
			},
			gotoCart() {
				uni.switchTab({
					url: '/pages/tabBar/cart/cart'
				})
			},
			addInCart() {
				// 先将购物车中数据取出来
				let cartArray = uni.getStorageSync("cart");
				console.log("cartArray", cartArray);
				let isExist = cartArray.findIndex(item => item.prodId == this.prod.id)
				console.log("isExist", isExist);
				
				if(isExist == -1) {
					cartArray.push({
						prodId: this.prod.id,
						price: this.prod.price,
						pic: this.prod.pic,
						name: this.prod.name,
						intro: this.prod.intro,
						count: 1
					});
					uni.setStorageSync("cart",cartArray)
				} else {
					uni.showToast({
						icon:'none',
						title: '该商品已经添加到了购物车'
					})
				}
			},
			buy() {
				
			}
		}
	}
</script>



<style lang="scss">
	page {
		position: relative;
		background-color: #f2f4f5;
		height: 3200rpx;
		overflow: auto;
		/* 允许页面内容滚动 */
	}

	.top {
		background-color: white;
		position: relative;
		/* 确保.top是相对定位，以便topimage可以绝对定位 */
		display: flex;
		/* 使用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐所有项目 */
		justify-content: center;
		/* 水平居中对齐所有项目，如果不需要可以去掉 */
		padding-left: 80rpx;
		padding-top: 60rpx;
		padding-bottom: 60rpx;

		.topimageleft {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 16rpx;
			left: 30rpx;
		}

		.topimageright {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 16rpx;
			right: 30rpx;
		}
	}

	.xiangqing {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 200rpx;
		width: 95%;
		margin-top: 60rpx;
		border-radius: 30rpx;
		background: white;

		.jiage {
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			top: 20rpx;
			left: 50rpx;
			color: #ff5546;
			font-weight: bold;
		}

		.canshu {
			position: absolute;
			top: 80rpx;
			left: 50rpx;
			font-weight: bold;
		}

		.fx {
			position: absolute;
			top: 140rpx;
			left: 80rpx;
			color: #919394;
			font-size: 16rpx;
		}

		.fximage {
			position: absolute;
			top: -1rpx;
			right: 50rpx;
			width: 30rpx;
			height: 30rpx;
			color: #919394;
			font-size: 16rpx;
		}

		.sc {
			position: absolute;
			top: 140rpx;
			left: 320rpx;
			font-size: 16rpx;
			color: #919394;
		}

		.scimage {
			position: absolute;
			top: -1rpx;
			right: 50rpx;
			width: 30rpx;
			height: 30rpx;
			color: #919394;
			font-size: 16rpx;
		}

		.jjtz {
			position: absolute;
			top: 140rpx;
			left: 580rpx;
			font-size: 16rpx;
			color: #919394;
		}

		.jjtzimage {
			position: absolute;
			top: -1rpx;
			right: 100rpx;
			width: 30rpx;
			height: 30rpx;
			color: #919394;
			font-size: 16rpx;
		}
	}

	.two {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 80rpx;
		width: 95%;
		;
		margin-top: 300rpx;
		border-radius: 30rpx;
		background: white;

		.yixuan {
			position: absolute;
			top: 20rpx;
			left: 50rpx;
			font-weight: bold;
			font-size: 16rpx;
		}

		.peizhi {
			position: absolute;
			top: 20rpx;
			left: 140rpx;
			font-size: 16rpx;
		}

		.twoiamge {
			width: 20rpx;
			height: 30rpx;
			position: absolute;
			top: 20rpx;
			left: 660rpx;
		}

	}

	.kuaidi {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 360rpx;
		width: 95%;
		margin-top: 420rpx;
		border-radius: 30rpx;
		background: white;

		.sz {
			position: absolute;
			top: 20rpx;
			left: 50rpx;
			font-weight: bold;
			font-size: 16rpx;
		}

		.dz {
			position: absolute;
			top: 20rpx;
			left: 200rpx;
			font-weight: bold;
			font-size: 16rpx;
		}

		.dzimage {
			width: 30rpx;
			height: 30rpx;
		}

		.fw {
			position: absolute;
			top: 120rpx;
			left: 50rpx;
			font-weight: bold;
			font-size: 16rpx;
		}

		.yf {
			position: absolute;
			top: 120rpx;
			left: 200rpx;
			font-weight: bold;
			font-size: 16rpx;
		}

		.yfimage {
			width: 30rpx;
			height: 30rpx;
		}

		.sh {
			position: absolute;
			top: 200rpx;
			left: 200rpx;
			font-weight: bold;
			font-size: 16rpx;
		}

		.shimage {
			width: 30rpx;
			height: 30rpx;
		}

		.th {
			position: absolute;
			top: 280rpx;
			left: 200rpx;
			font-weight: bold;
			font-size: 16rpx;
		}

		.thimage {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.pingjia {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		height: 600rpx;
		width: 95%;
		margin-top: 820rpx;
		border-radius: 30rpx;
		background: white;

		.yhpj {
			position: absolute;
			top: 20rpx;
			left: 50rpx;
			font-weight: bold;
		}

		.hpbfb {
			position: absolute;
			top: 20rpx;
			left: 530rpx;
			color: #ff5546;
			font-size: 10rpx
		}

		.hp {
			position: absolute;
			top: 20rpx;
			left: 580rpx;
			font-size: 10rpx
		}

		.hpimage {
			width: 20rpx;
			height: 20rpx;
		}

		.dh {
			position: absolute;
			top: 100rpx;
			left: 120rpx;
			font-weight: bold;
		}

		.dhimage {
			position: absolute;
			width: 80rpx;
			height: 80rpx;
			top: 50rpx;
			left: 10rpx;
		}

		.spms {
			position: absolute;
			top: 200rpx;
			left: 40rpx;
		}

		.dhh {
			position: absolute;
			top: 320rpx;
			left: 120rpx;
			font-weight: bold;
		}

		.dhimagee {
			position: absolute;
			width: 80rpx;
			height: 80rpx;
			top: 280rpx;
			left: 10rpx;
		}

		.spmss {
			position: absolute;
			top: 420rpx;
			left: 40rpx;
		}

		.anniu {
			position: absolute;
			top: 520rpx;
			left: 240rpx;
			display: inline-block;
			padding: 5px 20px;
			font-size: 16px;
			color: black;
			border: 1px solid #000;
			border-radius: 25px;
			cursor: pointer;
			text-decoration: none;
			text-align: center;
		}
	}


	.bottomimg {
		top: 2250rpx;
		background-color: white;
		position: absolute;
		/* 确保.top是相对定位，以便topimage可以绝对定位 */
		display: flex;
		/* 使用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐所有项目 */
		justify-content: center;
		/* 水平居中对齐所有项目，如果不需要可以去掉 */
		padding-left: 80rpx;
		padding-right: 80rpx;
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
